<template>
  <div class="meeting-docs">
    <div class="title">会议文档</div>

    <div class="search-area">
      <div class="searchinput-area">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
          class="custom-date-picker"
        />
      </div>
    </div>

    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="headerStyle"
        :row-class-name="tableRowClassName"
        empty-text=""
        @row-click="handleRowClick"
      >
        <el-table-column label="会议主题" prop="topic" min-width="200">
          <template #default="scope">
            <div class="subject-cell">
              <el-icon><Document /></el-icon>
              <span>{{ scope.row.topic }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="文档数量" prop="docCount" min-width="120" >
          <template #default="scope">
            <div class="subject-cell">
              <el-icon><Folder /></el-icon>
              {{ scope.row.docCount }}
            </div>
           
          </template>
        </el-table-column>

        <el-table-column label="会议号" prop="meetingId" min-width="180">
          <template #default="scope">
            <el-tag size="small" effect="plain">{{ scope.row.meetingId }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="开始时间" prop="startTime" min-width="180">
          <template #default="scope">
            <div class="time-cell">
              <el-icon><Timer /></el-icon>
              <span>{{ scope.row.startTime }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="!tableData.length" class="empty-state">
        <el-empty description="目前暂无会议文档" :image-size="200"></el-empty>
      </div>
    </div>
    <Pagination
      v-model:current="currentPage"
      v-model:pageSize="pageSize"
      :total="totalRecords"
      @pagination-change="fetchFiles"
      class="el-pagination"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Document, Timer,Folder } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router=useRouter()
const dateRange = ref(['', ''])
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页显示条数

const totalRecords = ref(0) // 注意这里改为总记录数
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
]

const tableData = ref([
  {
    topic: '22.6肖空调预征的会议',
    docCount: 1,
    meetingId: '196 242 306',
    startTime: '2025年02月12日 12:00'
  }
])

const headerStyle = {
  background: '#f5f7fa',
  color: '#606266',
  fontWeight: 600,
  height: '50px'
}

const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
}


// 获取文件方法
const fetchFiles =  () => {
  
}

// 处理行点击事件
const handleRowClick = (row: any, column: any, event: MouseEvent) => {
  router.push('/home/myConf/files/fielList')
}
</script>

<style scoped lang="scss">
.meeting-docs {
  padding: 20px 2vw;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .title {
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: 600;
    color: #303133;
    position: relative;
    padding-left: 15px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: var(--el-color-primary);
      border-radius: 2px;
    }
  }

  .search-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;

    .searchinput-area {
      display: flex;
      align-items: center;
      .custom-date-picker {
        width: 300px;
      }
    }
  }

  .table-container {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    font-size: 16px;

    :deep(.el-table) {
      .even-row {
        background: #fafafa;
      }

      .odd-row {
        background: #ffffff;
      }

      tr {
        height: 4rem;
        font-size: 1.2rem;
      }

      td {
        height: 4rem;
        font-size: 16px;
      }

      .el-tag {
        font-size: 14px;
      }

      .el-button {
        font-size: 14px;
      }
    }
  }

  .time-cell,
  .subject-cell {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .empty-state {
    margin: 100px 0;
  }
}
</style>
